<template>
  <div class="home">
    <div class="topnav">
      <img src="@/assets/images/logo.png" alt class="logo" />
      <a-anchor wrapperClass="myanchor" :affix="false">
        <a-anchor-link href="#waiguan" title="产品外观"></a-anchor-link>
        <a-anchor-link href="#xinneng" title="产品性能"></a-anchor-link>
        <a-anchor-link href="#youshi" title="产品优势"></a-anchor-link>
        <a-anchor-link href="#changjing" title="应用场景"></a-anchor-link>
        <a-anchor-link href="#xuanze" title="外观选择"></a-anchor-link>
      </a-anchor>
    </div>

    <div id="waiguan"></div>
    <waiguan></waiguan>
    <jianjie></jianjie>

    <div id="xinneng" style="height: 100px"></div>
    <xingneng></xingneng>
    <touming></touming>
    <frames></frames>

    <div id="youshi" style="height: 100px"></div>
    <youshi></youshi>

    <div id="changjing" style="height: 100px"></div>
    <changjing></changjing>

    <div id="xuanze" style="height: 100px"></div>
    <duocai></duocai>
    <canshu></canshu>
    <final></final>
  </div>
</template>

<script>
import waiguan from "@/components/waiguan";
import jianjie from "@/components/jianjie";
import xingneng from "@/components/xingneng";
import touming from "@/components/touming";
import frames from "@/components/frames";
import youshi from "@/components/youshi";
import changjing from "@/components/changjing";
import duocai from "@/components/duocai";
import canshu from "@/components/canshu";
import final from "@/components/final";

export default {
  components: {
    waiguan,
    jianjie,
    xingneng,
    touming,
    frames,
    youshi,
    changjing,
    duocai,
    canshu,
    final
  },
  data() {
    return {};
  }
};
</script>

<style lang="scss">
.topnav {
  height: 100px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  background: #fff;
  z-index: 999;
  top: 0;
}
.logo {
  height: 160px;
  position: absolute;
  top: -30px;
  left: 100px;
  object-fit: cover;
}
.myanchor {
  .ant-anchor-ink {
    display: none;
  }
  .ant-anchor {
    display: flex;
    width: 1000px;
    overflow: hidden;
    justify-content: space-around;
  }
  .ant-anchor-link-title {
    width: 86px;
    height: 44px;
    font-size: 20px;
    font-family: MicrosoftYaHei;
    color: rgba(51, 51, 51, 1);
    line-height: 26px;
    letter-spacing: 1px;
  }
  .ant-anchor-link-active > .ant-anchor-link-title {
    color: rgba(51, 51, 51, 1);
    position: relative;

    &::after {
      content: "";
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 0;
      height: 8px;
      background: linear-gradient(
        270deg,
        rgba(21, 166, 238, 1) 0%,
        rgba(9, 109, 217, 1) 100%
      );
    }
  }
}
</style>